import React, { Component } from 'react'
import { Button, Input, Select, List, Row, Col, Card } from 'antd';

//引入connect用于连接UI组件和redux
import { connect } from 'react-redux'
// 引入action
import { increment, decrement, incrementAsync } from '../../redux/actions/count'

class Count extends Component {
  state = {
    selectNum: 1
  }
  // 加
  increment = () => {
    // 通知redux加value
    const { selectNum } = this.state
    this.props.increment(selectNum)
  }
  // 减
  decrement = () => {
    // 通知redux减value
    const { selectNum } = this.state
    this.props.decrement(selectNum)
  }
  // 奇数加
  incrementIfOdd = () => {
    const { selectNum } = this.state
    if (this.props.count % 2 !== 0) {
      this.props.increment(selectNum)
    }
  }
  // 异步加
  incrementAsync = () => {
    const { selectNum } = this.state
    this.props.incrementAsync(selectNum, 500)
  }
  // 下拉数据改变
  handleChange = (val) => {
    this.setState({ selectNum: val })
  }
  render() {
    const { selectNum } = this.state
    console.log(this.props);
    const { count, persons } = this.props
    return (
      <div style={{ padding: '10px' }}>
        <Card hoverable>
          <Row>
            <Col span={12}>
              <h4>我是Count组件</h4>
              <span>当前求和为：</span><Input value={count} style={{ width: 200 }} placeholder="" />
              <br />
              <Select
                value={selectNum}
                style={{
                  width: 200,
                  padding: '5px 0',
                  marginRight: 5
                }}
                onChange={this.handleChange}
                options={[
                  {
                    value: 1,
                    label: '1',
                  },
                  {
                    value: 2,
                    label: '2',
                  },
                  {
                    value: 3,
                    label: '3',
                  }
                ]}
              />
              <Button onClick={this.increment} type="primary" style={{ marginRight: 5 }}> + </Button>
              <Button onClick={this.decrement} style={{ marginRight: 5 }}> - </Button>
              <Button onClick={this.incrementIfOdd} style={{ marginRight: 5 }} type="dashed">奇数加</Button>
              <Button onClick={this.incrementAsync} style={{ marginRight: 5 }} type="dashed">异步加</Button>
            </Col>
            <Col span={12}>
              <List
                header={<div>Person组件的列表数据为</div>}
                style={{ width: 400, marginBottom: 10 }}
                bordered
                dataSource={persons}
                renderItem={(item) => (
                  <List.Item key={item.id}>
                    姓名：{item.name}&nbsp; 年龄：{item.age}
                  </List.Item>
                )}
              />
            </Col>
          </Row>
        </Card>

      </div>
    )
  }
}

// // 映射状态
// const mapStateToProps = state => ({ count: state })

// // 映射操作状态的方法
// const mapDispatchToProps = dispatch => ( {
//   // 通知redux执行加法
//   jia: (number) => dispatch(createIncrementAction(number)),
//   jian: (number) => dispatch(createDecrementAction(number)),
//   jiaAsync: (number, time) => dispatch(createIncrementAsyncAction(number, time))
// })

// 使用connect创建并暴露一个Count的容器组件
// export default connect(mapStateToProps, mapDispatchToProps)(CountUI)
export default connect(
  state => ({ count: state.count, persons: state.persons }),
  // mapDispatchToProps的一般写法(函数)
  /* dispatch => ({
      // 通知redux执行加法
      jia: (number) => dispatch(createIncrementAction(number)),
      jian: (number) => dispatch(createDecrementAction(number)),
      jiaAsync: (number, time) => dispatch(createIncrementAsyncAction(number, time))
    }) */
  // mapDispatchToProps的简写（对象）
  {
    increment,
    decrement,
    incrementAsync,
  }
)(Count)
